<!-- eslint-disable vue/require-v-for-key -->
<template lang="">
  <!-- 公告 -->
  <div class="div2">
    <div class="div1">
      <el-row style="height:40px;line-height:40px">
        <el-col :span="1"><div class="grid-content tag">地区</div></el-col>
        <el-col :span="23"><div class="grid-content">
            <el-tabs v-model="activeName1" @tab-click="addressClick" style="margin-left: 40px;">
              <el-tab-pane v-for="(_key,index) in addressList" :key="_key" :label="addressList[index]" :name ="index=== 0?'first':''"></el-tab-pane>
            </el-tabs>
        </div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item,index) in announcementList" :key="index"><div class="ann-list" @click="skipAnnouncementDetails(item)">
          <el-row :gutter="20" style="margin:0;margin-bottom: 20px;">
            <el-col :span="17"><div>
              <p style="margin-top: 0;"><b>关于近期上架的竞品：{{item.goodsName}}</b></p>
              <p style="font-size: 12px;color:rgb(99, 99, 99)">
                受委托于{{item.startTime}}至{{item.endTime}}止(延时的除外)在富宝旗下资产处置平台(网址:http://zichan.f139.com/)进行公开转卖，现将有关事项公告如下：
              </p>
              <p style="font-size:10px;color:rgb(166, 166, 166);">{{item.createTime}}</p>
              <div style="width: 200px;float: left;font-size:10px;color:rgb(166, 166, 166)">{{item.transactionAddress}}</div>
              <div style="float: right;font-size:10px;color:rgb(166, 166, 166)">{{item.pageViews}}</div>
              <img class="huo" src="../assets/huo.png">
            </div></el-col>
            <el-col :span="7">
              <div>
                <img style="width: 160px;height:150px;" src="https://img2.baidu.com/it/u=1375227355,3146607532&fm=253&fmt=auto&app=138&f=JPEG?w=425&h=500" fit="cover">
                <!-- <el-img :src="'http://101.43.223.224:8765/image/getImageById?id='+item.imageId" fit="cover"></el-img> -->
                <!-- <el-image
                style="width: 100%;height:100%"
                :src="'http://101.43.223.224:8765/image/getImageById?id='+item.imageId"
                fit="cover"></el-image> -->
              </div>
            </el-col>
          </el-row>
        </div></el-col>
      </el-row>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="9"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" style="margin:10px auto;float:left;width:100%;text-align: center;">
      </el-pagination>
    </div>
    <el-row>
      <el-col :span="8"><div>
          <div style="width: 40%;height: 200px;margin-left: 10%;float: left;">
            <img style="float: left;margin-top: 37px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u561.svg">
            <div style="float: left;margin-left: 10px;font-size: 18px;margin-top: 50px;">微信服务号</div>
            <span style="float: left;margin-left: 10px;margin-top:30px;font-size: 14px;">一手消息随时掌握</span>
          </div>
        </div></el-col>
      <el-col :span="8"><div>
        <div style="width: 40%;height: 200px;float: left;margin-left: 10%;">
          <img style="float: left;margin-top: 37px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u564.svg">
          <div style="float: left;margin-left: 10px;font-size: 18px;margin-top: 50px;">微信小程序</div>
          <span style="margin-left: -87px;margin-top: 100px;float: left;font-size: 14px;">随时随地交易</span>
        </div>
      </div></el-col>
      <el-col :span="8"><div>
        <p style="margin-top: 47px;">
          <span style="margin-right: 50px;font-size: 14px;">沪ICP备XXXXXXXX号</span>
          <span style="margin-right: 50px;font-size: 14px;">增值电信业务经营许可证沪B</span>
          <span style="font-size: 14px;">全国免费服务热线：400-886-0000</span>
        </p>
        <p style="margin-top: 30px;">
          <span style="margin-right: 50px;font-size: 14px;">沪ICP备XXXXXXXX号</span>
          <span style="font-size: 14px;">增值电信业务经营许可证沪B</span>
        </p>
      </div></el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      phone: '', // 手机号
      form: {},
      currentPage4: 1, // 分页显示第几页
      pageRequest: { // 分页请求参数
        pageSize: 9, // 每页条数
        pageNum: 1 // 每页数量
      },
      total: 0, // 分页总条数
      announcementList: {}, // 公告列表
      activeName1: 'first', // 标签框框
      activeName2: 'first', // 标签框框
      addressList: ['不限', '河南', '北京', '广东', '上海', '陕西', '山东', '湖南', '四川', '浙江', '辽宁', '河北', '福建', '江苏', '湖北'], // 地区列表
      industryList: ['不限', '二手设备', '再生资源', '废旧资源', '危废', '旧货'], // 行业框框
      transactionAddress: '', // 交易地址（筛选条件）
      clientAnnouncement: {
        id: '',
        pageViews: ''
      }, // 自增
      count: 0

    }
  },
  async mounted () {
    this.selectAnnouncementList()
  },
  methods: {
    // 无限滚动
    load () {
      this.count += 2
    },
    async selectAnnouncementList () { // 查询公告
      this.$axios.get('announcement/selectAnnouncementList', { params: { address: this.transactionAddress, pageSize: this.pageRequest.pageSize, pageNum: this.pageRequest.pageNum } }).then((res) => {
        console.log(res)
        if (res.data.code === '200') {
          console.log('查询公告成功')
          this.announcementList = res.data.obj.content
          this.total = res.data.obj.total
        }
      })
    },
    handleClick (tab, event) {

    },
    addressClick (val) {
      if (val._data.index !== '0') {
        this.transactionAddress = val.$options.propsData.label
      } else {
        this.transactionAddress = ''
      }
      console.log(this.address)
      this.selectAnnouncementList()
    },
    skipAnnouncementDetails (item) { // 跳转公告详情页面
      // 自增浏览量
      this.clientAnnouncement.id = item.id
      this.clientAnnouncement.pageViews = item.pageViews
      this.$axios.post('announcement/announcementPageViewsIncr', this.clientAnnouncement).then((res) => {
        console.log(res)
      })
      this.$router.push({ path: '/announcementDetails', query: item })
    },
    // free_commission () { // 免费委托弹窗方法
    //   // 手机格式验证
    //   const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    //   if (this.phone !== '' && regMobile.test(this.phone)) {
    //     this.dialogVisible1 = true
    //   } else {
    //     this.myMessage('warning', '手机号为空或手机号格式不正确')
    //   }
    // },
    handleSizeChange (val) { // 改变每页条数
      this.pageRequest.pageSize = val
      this.selectAnnouncementList()
    },
    handleCurrentChange (val) { // 改变当前页
      this.pageRequest.pageNum = val
      this.selectAnnouncementList()
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .div2{
    width: 100%;
    height: 100%;
  }
  .div1{
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .tag{
    text-align: center;
    border-radius: 10px;
    background-color: #D7000F;
    color: #F1F2E5;
  }
  .QR_code_two{
    float: left;
    width: 50%;
    height: 200px;
  }
  .QR_code_one{
    float: left;
    width: 50%;
    height: 200px;
  }
  .QR_code{
    margin-top: 50px;
    float: left;
    width: 100%;
    height: 240px;
  }
  .huo{
    float: right;
    width: 20px;
    margin-top: -2px;
    opacity: 0.7;
  }
  .ann-list{
    padding:10px ;
    height:150px;
    margin-bottom: 20px;
    border-radius: 10px;
  }
  .ann-list:hover b{
    color:#D7000F;
  }

  /deep/.el-tabs__active-bar{
    background-color: #D7000F;
  }
  /deep/.el-tabs__item.is-active{
    color:#D7000F;

  }
  /deep/.el-tabs__nav-scroll {
    background-color: none;
  }
  /deep/.el-tabs__nav-wrap::after {
    background: none;
  }
  /deep/.el-tabs__item:hover{
    color:#D7000F;
  }

</style>
